<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

*{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: rgb(152, 149, 149);
}
.box{
    width: 1480px;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto;
    border: 1px solid #000;
    border-radius: 80px 0 80px 0;
    box-shadow: 10px 2px 4px rgb(212, 17, 50);
} 
.toubu{
    width: 100%;
    height: 30px;
}
.toubu span{
    margin-bottom: 15px;
}
.toubu a{
   float: right;
   overflow: hidden;
}
.neirong{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(2,1fr);
    gap: 10px;
} 
.card{
    width: calc(30%-20px);
    overflow: hidden;
    width: 233px;
    background-color: white;
    box-shadow: 0 2px 4px gray;
    text-align: center;
} 
.card span{
    color: rgb(255, 0, 76);
}
.card p{
    color: black;
}
.card img{
   width: 233px;
   height: auto;
}
</style>
<body>
    <div class="box">
        <div class="toubu">
         <span>精品推荐</span>
         <a href="#">查看全部</a>
        </div>
        <div class="neirong">
             <!--
                <div class="card">
                 <a href="#"><img src="./images/course01.png" alt=""></a>
                 <a href="#"><p>Think PHP 5.0 博客系统实战项目演练</p></a>
                 <a href="#"><span>高级</span>·<span>1125</span>人在学习</a>
                </div>        
              -->
    <script>
                let data = [
                        {
                            src: 'images/course01.png',
                            title: 'Think PHP 5.0\s\s 博客系统实战项目演练',
                            num: 1125
                        },
                        {
                            src: 'images/course02.png',
                            title: 'Android 网 络 动 态 图 片 加 载 实    战',
                            num: 357
                        },
                        {
                            src: 'images/course03.png',
                            title: 'Angular2 大前端商城实战项目演练',
                            num: 22250
                        },
                        {
                            src: 'images/course04.png',
                            title: 'A n  d r o i d A P P  实 战 项 目 演 练',
                            num: 389
                        },
                        {
                            src: 'images/course05.png',
                            title: '[ U G U I  ] //源 码 深 度 分 析 案 例',
                            num: 124
                        },
                        {
                            src: 'images/course06.png',
                            title: 'Kami2首页界面切换效果实战演练',
                            num: 432
                        },
                        {
                            src: 'images/course07.png',
                            title: 'UNITY 从 入 门 到 精 通 实 战 案 例',
                            num: 888
                        },
                         {
                            src: 'images/course08.png',
                            title: 'Cocos 深度学习你不会错过的实战',
                            num: 590
                        },
                    ]
                    for(let i=1;i<data.length;i++){
                    document.write(`
                    <li>
                        <div class="card">
                            <a href="#"><img src=${data[i].src} title="${data[i].title}"></a>
                            <a href="#"><p>${data[i].title}</p></a>
                            <a href="#"><span>高级</span>·<span>${data[i].num}</span>人在学习</a>
                        </div>
                     </li>  
                
            `)}
    </script>
</body>
</html>